<template>
  <div class="logo-upload">
    <div class="bg">
      <img :src="src" />
      <div class="actions">
        <el-upload
          accept=".png"
          :action="action"
          with-credentials
          @success="onSuccess"
          :before-upload="beforeUpload"
          :data="{ storageType: 'minio' }"
          :show-file-list="false"
        >
          <div class="change">更换</div>
        </el-upload>
        <div class="reset" @click="onReset">还原</div>
      </div>
    </div>
    <div class="title">
      <span>{{ props.data.title }}</span>
      <el-tooltip
        effect="light"
        :content="props.data.tip"
        placement="bottom"
        popper-class="logo-upload-tip"
      >
        <SvgIcon icon-class="logo_tip" />
      </el-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import { confirmAgain } from '@/utils';
import { computed, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useGlobalStore } from '@/store/global';

interface IProps {
  data: any;
}

const props = withDefaults(defineProps<IProps>(), {});
const action = ref('/auth/admin/resource/file/upload');
const globalStore = useGlobalStore();
const defaultSrc = globalStore.defaultSrc;
const defaultFavicon = globalStore.defaultFavicon;
const src = computed(() => {
  return [defaultSrc, defaultFavicon].includes(props.data.src)
    ? props.data.src
    : `/attachment/${props.data.src}`;
});

const onReset = async () => {
  const flag = await confirmAgain('温馨提示', '确认还原此LOGO？');
  if (flag) {
    props.data.onUpdate?.();
  }
};

const onSuccess = (result: any) => {
  if (!result.code) {
    props.data.onUpdate?.(result);
  } else {
    ElMessage.error(result.msg);
  }
};

const beforeUpload = (file: any) => {
  const arr = file.name?.split('.');
  if (arr[1] && ['png'].includes(arr[1])) return;
  ElMessage.error('上传文件类型不是png！');
  return false;
};
</script>

<style lang="less">
.logo-upload-tip {
  width: 180px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}
</style>

<style lang="less" scoped>
.logo-upload {
  width: 420px;
  height: 310px;
  background: #efefef;
  border-radius: 8px;
  padding: 16px;

  .bg {
    width: 100%;
    height: 240px;
    background: #171b1f;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    &:hover {
      .actions {
        display: block;
      }
    }

    img {
      width: 90px;
    }

    .actions {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: none;
      background: #161b1e80;
      width: 90px;
      height: 90px;
      padding: 4px 8px;

      .change {
        width: 74px;
        height: 32px;
        background: #0460fd;
        border-radius: 4px;
        color: #fff;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        margin-bottom: 14px;
      }

      .reset {
        width: 74px;
        height: 32px;
        background: rgba(4, 96, 253, 0.3);
        border-radius: 4px;
        border: 1px solid #0460fd;
        color: #fff;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
      }
    }
  }

  .title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #161616;
  }
}
</style>
